<template>
    <div>
      <Nav></Nav>
      <div class="container-fluid" style="margin-top: 100px">
        <!-- 看板 -->
        <div class="row">
          <div class="col-md-1"></div>
          <div class="col-md-10">
            <div class="card">
              <div class="card-header bg-light">
                个人中心: <span >{{ user.username }}</span>
              </div>
              <div class="card-body">
                <div class="row">
                  <div class="col-md-8">
                    <table class="table table-condensed lead">
                      <tr>
                        <td style="width: 100px">用户信息</td>
                        <td><span >{{ user.username }}</span></td>
                      </tr>
                      <tr>
                        <td>年龄</td>
                        <td><span ></span>{{ user.age }}</td>
                      </tr>
                      <tr>
                        <td>手机号</td>
                        <td><span >{{ user.mobile }}</span></td>
                      </tr>
                      <tr>
                        <td>个人邮箱</td>
                        <td><span  >{{ user.email }}</span></td>
                      </tr>
                      <tr>
                        <td>地址</td>
                        <td><span  >{{ user.address }}</span></td>
                      </tr>
                    </table>
                    <hr />
                  </div>
                  <div class="col-md-4">
                    <img
                      :src="user.avatar"
                      class="img-fluid img-thumbnail"
                      alt=""
                    />
                  </div>
                </div>
                <hr />
                <p class="text-justify">
                  <span readonly>{{ user.username }}</span>
                </p>
              </div>
              <div class="card-footer">
                <a
                  href="#"
                  class="btn btn-success btn-sm"
                  @click="back()"
                  ><i class="fa fa-history"></i> 返回</a
                >
              </div>
            </div>
          </div>
          <div class="col-md-1"></div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup name="AdminInfo">
  import Nav from "../Nav.vue";
  import "../../assets/css/bootstrap.min.css";
  import "../../assets/css/font-awesome.css";
  import { useRoute, useRouter } from "vue-router";
  import { ref, reactive, onMounted,watch } from "vue";
  import { getAdminInfo } from "../../api/user";
  const route = useRoute();
  const router = useRouter();
  
  const adminId = route.params.id as string;
  const user = reactive({
    username: "",
    age: "",
    mobile: "",
    email: "",
    address: "",
    description: "",
    avatar: "",
  });
  const getAdmin = async () => {
    const res = await getAdminInfo(adminId);
    if (res.data.code === 1) {
      Object.assign(user, res.data.data);
    }
  };
  watch(
    () => route.params.id,
    async (newId: any) => {
      if (newId !== adminId) {
        adminId = newId;
          user = null;
        await onMounted();
      }
    }
  );
  const back = () => {
    window.location.href='/dataView'
  }
  
  onMounted(() => {
    getAdmin()
  })
  </script>
  
  <style scoped></style>
  